<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<link rel="stylesheet" href="__PUBLIC__/css/jquery-ui-1.8.18.custom.css">
<script src="__PUBLIC__/js/jquery-1.7.1.min.js"></script>
<script src="__PUBLIC__/js/jquery-ui-1.8.18.custom.min.js"></script>
<script>
	$(function() {
		var icons = 
		$( "#menu" ).accordion({
			icons: { header: "ui-icon-circle-arrow-e",headerSelected: "ui-icon-circle-arrow-s"},
			autoHeight: false,
			navigation: true,
			collapsible: true
		});
		
		$( ".submenu" ).selectable({
			stop: function() {
				$( ".ui-selected", this ).each(function() {
					goURL($(this).attr('url'));
				});
			}
		});
		
	});

	function goURL(url){
		parent.document.getElementById('main-frame').src=url;
	}
	</script>
	<style>
	body {font-size: 14px;}
	
	.submenu { list-style-type: none; margin-bottom:5px; padding:0; }
	.submenu li { cursor:pointer; margin: 5px 3px ; padding: 3px 0px 3px 10px; font-size: 12px ;line-height:16px; }
	.submenu li span { position: absolute; margin-left: -13px;}
	.submenu .ui-selecting { background: #555;color:white;font-weight:normal;  }
	.submenu .ui-selected { background: #666; font-weight:normal; color:white; }
	</style>
</head>

<body>

<div id="menu">
<volist name="menus" id="vo">
	<h3><a href="#">{$vo.name}</a></h3>
	<div>
		<ul class="submenu">
			<foreach name="vo['sub']" item="m">
			<li class="ui-state-default" url="__GROUP__/{$m.url}"><span class="ui-icon ui-icon-triangle-1-e"></span>{$m.name}</li>
			</foreach>
		</ul>
	</div>
</volist>	
	

</div><!-- End menu -->
</body>
</html>
